<template>
  <div class="hm-input">
    <input
      :class="{success:status==='success',
    fail:status==='fail'}"
      :value="value"
      @input="iptFn"
      :type="type"
      :placeholder="placeholder"
    >
    <div class="tip" v-show="status==='fail'">{{message}}</div>
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  props: {
    placeholder: String,
    type: String,
    value: String,
    rule: RegExp,
    message: String
  },
  data() {
    return {
      status: ""
    };
  },
  methods: {
    iptFn(e) {
      let value = e.target.value;
      this.$emit("input", value);
      this.validate(value);
    },
    // 开始校验的方法
    validate(value) {
      if (this.rule.test(value)) {
        // console.log("校验合格");
        this.status = "success";
        return true;
      } else {
        //校验不合格
        this.status = "fail";
        return false;
      }
    }
  }
};
</script>

<style scoped lang='less'>
.hm-input {
  height: 50px;
  // background: pink;
  margin: 0 20px;
  input {
    width: 100%;
    height: 30px;
    border: none; // 失焦的边框
    outline: none; // 聚焦的边框
    border-bottom: 1px solide firebrick;
    &.success {
      border-bottom: 1px solid green;
    }
    &.fail {
      border-bottom: 1px solid red;
    }
  }
  .tip {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: red;
  }
}
</style>